<template>
	<view class="side-bar-content" :style="contentStyle">
		<view class="active-item" :style="activeStyle"><view class="active-item-text">{{ activeItem ? activeItem[textKey] : '' }}</view></view>
		<view v-for="item,index in list" :key="index" @click="onCilck(item,index)" class="item" :style="itemStyle">
			{{ item[textKey] ? item[textKey] : '' }}
		</view>
	</view>
</template>

<script>
	export default {
		name:"ycy-side-bar",
		props: {
			width: { type: Number, default: 190 },
			itemColor: { type: String, default: '#f6f6f6' },
			itemAcitveColor: { type: String, default: 'white' },
			barColor: { type: String, default: '#9dae8a' },
			itemHeight: { type: Number, default: 90 },
			textKey: { type: String, default: 'label'},
			list: { type: Array, default: [] },  //[{ label: 'xxx'}]
		},
		computed: {
			itemStyle() {
				return `height: ${this.itemHeight}rpx;background-color: ${this.itemColor};`;
			},
			activeStyle() {
				return `height: ${this.itemHeight}rpx;background-color: ${this.itemAcitveColor};
						top: ${ this.itemHeight * this.activeIndex }rpx;font-weight: bold;width: ${this.width}rpx;`;
			},
			contentStyle() {
				return `width: ${this.width}rpx;`;
			},
			activeItem() {
				return this.list[this.activeIndex] ? this.list[this.activeIndex] : undefined;
			}
		},
		data() {
			return {
				activeIndex: 0
			};
		},
		methods: {
			onCilck(item,index) {
				// this.activeItem = item;
				this.activeIndex = index;
				this.$emit('onCilck', { item, index });
			}
		}
	}
</script>

<style lang="scss">
.side-bar-content {
	position: relative;
	font-size: $uni-font-size-base;
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 2rpx;
	}
	.active-item {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		transition: all 0.5s; 
		border-left: 3px solid $green-bg-color;
		&-text {
			transform: translateX(-3px);
		}
	}
}
</style>